<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			购买包月
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonetap">
					<view class="stapone">
						<view class="staponeleft">{{list.projectName}}</view>
						<view class="staponeright" @click="xgbtn">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//xiugai.png"></image>
						</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户姓名:{{list.realName}}</view>
						<view class="staptworight">基本账户:{{list.realBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户编号:{{list.id}}</view>
						<view class="staptworight">赠送账户:{{list.dummyBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">包月期限：<span v-if="list.endTime">{{list.endTime}}</span>
							<span v-else>无</span>
						</view>
						<view class="staptworight" v-show="list.monthlyType=='A1'||list.monthlyType=='A3'||list.monthlyType=='A4'||list.monthlyType=='A6'">剩余：
							<span v-if="list.monthlyType=='A1'||list.monthlyType=='A4'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A3'||list.monthlyType=='A6'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
						<view class="staptworight" v-show="list.monthlyType=='A5'||list.monthlyType=='A7'">剩余：
							<span v-if="list.monthlyType=='A5'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A7'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
					</view>
				</view>
			</view>
			<view class="tapthree" v-show="monthshow&&addNew=='0'">
				<view v-show="type=='1'">
					<van-collapse v-model="activeNames">
						<van-collapse-item name="1">
							<template #title>
								<view>
									<view class="tphand">{{baoyue.packageName}}</view>
									<view class="tpfoot" v-show="baoyue.types=='A3'">
										包月价格{{baoyue.standard}}元/{{baoyue.numStr}}次</view>
									<view class="tpfoot" v-show="baoyue.types=='A1'">
										包月价格{{baoyue.standard}}元/{{baoyue.numStr}}小时</view>
								</view>
							</template>
							<view class="showtap">
								<view class="stone">
									<span style="color: #F078CE;"
										v-show="baoyue.types=='A1'">包月价格为{{baoyue.standard}}元/{{baoyue.numStr}}小时</span>
									<span style="color: #F078CE;"
										v-show="baoyue.types=='A3'">包月价格为{{baoyue.standard}}元/{{baoyue.numStr}}次</span>
									，按照自然月计算， 如购买一个月，则有效期到本月底。<br />
									计算方法:本月费用=包月费用+ 30x本月剩余天数;<br />
									如购买2个月则有效期到下月底。<br />
									当月的包月套餐不能退。
								</view>
								<view class="stwo">
									<view class="stleft">
										<van-stepper v-model="numtitle" @change="onChange1" />
									</view>
									<view class="stright">
										<view class="srtxt">
											总支付：<span style="color: #45CC21;">{{bynum}}元</span>
										</view>
										<view class="srbtn" @click="monthlybuy1(baoyue.packageId)">
											购买
										</view>
									</view>
								</view>
							</view>
						</van-collapse-item>
						<van-collapse-item name="2" v-if="jshow">
							<template #title>
								<view>
									<view class="tphand" v-show="jiayoubao.types=='A1'">
										加油包价格{{jiayoubao.standard}}元/{{jiayoubao.numStr}}小时</view>
									<view class="tphand" v-show="jiayoubao.types=='A3'">
										加油包价格{{jiayoubao.standard}}元/{{jiayoubao.numStr}}次</view>
								</view>
							</template>
							<view class="showtap">
								<view class="stone">
									<span style="color: #F078CE;"
										v-show="jiayoubao.types=='A1'">加油包价格为{{jiayoubao.standard}}元/{{jiayoubao.numStr}}小时</span>
									<span style="color: #F078CE;"
										v-show="jiayoubao.types=='A3'">加油包价格为{{jiayoubao.standard}}元/{{jiayoubao.numStr}}次</span>
									，按照充电次数计算， 如购买一个加油包，则本月充电次数增加当前单个加油包次数<br />
									如购买2个加油包，则本月充电次数增加当前单个加油包次数的两倍<br />
									仅当月有效
								</view>
								<view class="stwo">
									<view class="stleft">
										<!-- <van-stepper v-model="numtitle1" /> -->
									</view>
									<view class="stright">
										<view class="srtxt">
											总支付：<span style="color: #45CC21;">{{jiayoubao.standard}}元</span>
										</view>
										<view class="srbtn" @click="comebuy(jiayoubao.id)">
											购买
										</view>
									</view>
								</view>
							</view>
						</van-collapse-item>
					</van-collapse>
				</view>
				<view v-show="type=='0'">
					<van-collapse v-model="activeNames" v-for="(item, index) in showlist" :key="index">
						<van-collapse-item :name="index">
							<template #title>
								<view>
									<view class="tphand">{{item.packageName}}</view>
									<view class="tpfoot" v-show="item.types=='A3'">
										包月价格{{item.standard}}元/{{item.numStr}}次</view>
									<view class="tpfoot" v-show="item.types=='A1'">
										包月价格{{item.standard}}元/{{item.numStr}}小时</view>
								</view>
							</template>
							<view class="showtap">
								<view class="stone">
									<span style="color: #F078CE;"
										v-show="item.types=='A1'">包月价格为{{item.standard}}元/{{item.numStr}}小时</span>
									<span style="color: #F078CE;"
										v-show="item.types=='A3'">包月价格为{{item.standard}}元/{{item.numStr}}次</span>
									，按照自然月计算， 如购买一个月，则有效期到本月底。<br />
									计算方法:本月费用=包月费用+ 30x本月剩余天数;<br />
									如购买2个月则有效期到下月底。<br />
									当月的包月套餐不能退。
								</view>
								<view class="stwo">
									<view class="stleft">
										<van-stepper v-model="item.numtitle" @change="onChange(index)" />
									</view>
									<view class="stright">
										<view class="srtxt">
											总支付：<span style="color: #45CC21;">{{item.bynum}}元</span>
										</view>
										<view class="srbtn" @click="monthlybuy(item.packageId,item.numtitle)">
											购买
										</view>
									</view>
								</view>
							</view>
						</van-collapse-item>

					</van-collapse>
				</view>
			</view>
			<view class="newtap" v-show="addNew=='1'">
				<view class="newone">
					<view class="newonetap" style="color: red;">
						当前套餐：
						<view class="newonetapsun" v-if="currPackage">
							<span
								v-show='currPackage.packagePower!=0'>{{currPackage.packagePower}}瓦以下--{{currPackage.packageMoney}}元/30天
								{{currPackage.packageNumsStr}}</span>
							<span
								v-show='currPackage.packagePower==0'>{{currPackage.packagePower}}瓦以上--{{currPackage.packageMoney}}元/30天
								{{currPackage.packageNumsStr}}</span>
							<span v-show='currPackage.types=="A4"'>小时/30天</span>
							<span v-show='currPackage.types=="A5"'>小时/天</span>
							<span v-show='currPackage.types=="A6"'>次/30天</span>
							<span v-show='currPackage.types=="A7"'>次/天</span>
						</view>
						<view class="newonetapsun" v-else="!currPackage">暂未购买包月套餐</view>
					</view>
				</view>
				<view class="newone" v-show="newbaoyue">
					<view class="newonetap">{{newbaoyue.packageName}}</view>
				</view>

				<view class="newone" v-if="newbaoyue">
					<view class="newtwotap" v-for="(item,index) in newbaoyue.steps" :key="index">
						<view class="newtwotapsun">
							<span v-show='item.minPower!=item.maxPower'>
								{{item.maxPower}}瓦以下--{{item.standard}}元/30天 {{item.numStr}}
							</span>
							<span v-show='item.minPower==item.maxPower'>
								{{item.maxPower}}瓦以上--{{item.standard}}元/30天 {{item.numStr}}
							</span>
							<span v-show='item.types=="A4"'>小时/30天</span>
							<span v-show='item.types=="A5"'>小时/天</span>
							<span v-show='item.types=="A6"'>次/30天</span>
							<span v-show='item.types=="A7"'>次/天</span>
							<view style="color: red;font-size: 20upx;margin-top: 10upx;" v-show="item.recommend==1">
								根据您电动车功率,推荐您购买此套餐</view>
						</view>
						<view class="newtwotapbtn" v-show="item.opers==0" @click="newbtn(index)">购买</view>
						<view class="newtwotapbtn" style="background-color: #45CC21;" v-show="item.opers==1" @click="sjbtn(item.stepId)">升级</view>
					</view>
				</view>
				<view class="newone" v-if="newjiayou">
					<view class="newtwotap">
						<view class="newtwotapsun">加油包价格为：
							{{newjiayou.standard}}元/{{newjiayou.numStr}}
							<span v-show='newjiayou.types=="A4"'>小时/30天</span>
							<span v-show='newjiayou.types=="A5"'>小时/天</span>
							<span v-show='newjiayou.types=="A6"'>次/30天</span>
							<span v-show='newjiayou.types=="A7"'>次/天</span>
						</view>
						<view class="newtwotapbtn" @click="jybtn(newjiayou.id,newjiayou.standard)">购买</view>
					</view>

				</view>
			</view>
			<!-- //弹窗温馨提示 -->
			<van-popup v-model="nbyshow">
				<view class="tan1">
					<view class="tanhand">
						<view>温馨提示</view>
					</view>
					<view class="stwotap">
						<view class="stleft" style="display: flex;align-items: center;">
							<view style="margin-right: 15upx;">请选择购买月数</view>
							<van-stepper v-model="nbynum" max="12" disable-input />
						</view>
						
					</view>
					<view class="tanone" style="font-weight: 700;padding: 20upx 0;">
						您正在购买{{nbylist.jg}}包月套餐，共计{{nbylist.standard*nbynum}}元，确认购买吗？
					</view>
					
					<view class="tanonedibu" style="justify-content: center;">
						<view class="dbleft" @click="nbyclose">
							取消
						</view>
						<view class="dbright2" @click="nbybtn">
							确认
						</view>
					</view>
				</view>
				
			</van-popup>
			<!-- //弹窗温馨提示 -->
			<van-popup v-model="tcshow">
				<view class="tan1">
					<view class="tanhand">
						<view>温馨提示</view>
					</view>
					
					<view class="tanone" style="font-weight: 700;padding: 20upx 0;text-align: center;">
						检测到当前充电场地需要购买停车包月套餐<br/>您尚未购买,是否立刻跳转并购买？
					</view>
					
					<view class="tanonedibu" style="justify-content: center;">
						<view class="dbleft" @click="tcclose">
							暂不购买
						</view>
						<view class="dbright2" @click="tcbtn">
							去购买
						</view>
					</view>
				</view>
				
			</van-popup>
		</view>
	</view>
</template>

<script>
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {},
		mounted() {

		},

		data() {
			return {
				activeNames: [''], //当前展开面板的 name
				numtitle: 1, //加减值
				list: {},
				id: '', //用户ID
				baoyue: {}, //包月套餐信息
				jiayoubao: {}, //加油包信息
				bynum: 0, //包月支付金额
				jshow: false,
				monthshow: false,
				type: '0',
				showlist: [],
				addNew: '0',
				currPackage: {}, //新包月当前购买套餐
				newbaoyue: {}, //新包月套餐列表
				newjiayou: {}, //新包月加油包
				nbyshow:false,//30天购买弹窗
				nbylist:{},
				nbynum:1,
				tcshow:false
				
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.show()
			this.monthly();
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//额度选择按钮
			numbtn(val) {
				this.numshow = val
			},
			pad(num, n) {
				var len = num.toString().length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				return num;
			},
			//获取用户信息
			show() {
				this.$base.request('user/info' + '/' + this.id, 'GET')
					.then(res => {
						this.list = res.data.data
						this.list.id = this.pad(this.list.id, 8)
					})
					.catch(err => {

					})
			},
			//跳转修改页面
			xgbtn() {
				uni.navigateTo({
					url: '/pages/modify_user_information/modify_user_information?id=' + this.id + '&realName=' +
						this.list.realName +
						'&phone=' + this.list.phone,
				});
			},
			//获取包月数据
			monthly() {
				let data = {
					userId: this.id
				}
				this.$base.request('manager/recharge/monthly', 'GET', data)
					.then(res => {
						if (res.data.code == 200) {
							this.addNew = res.data.data.addNew
							if (res.data.data.addNew == '0') {
								if (res.data.data.type == 1) {
									this.type = 1
									this.monthshow = true
									this.baoyue = res.data.data.baoyue
									this.bynum = this.baoyue.standard * this.numtitle
									if (res.data.data.jiayoubao) {
										this.jiayoubao = res.data.data.jiayoubao
										this.jshow = true
									}
								} else if (res.data.data.type == 0) {
									this.type = 0
									this.monthshow = true
									this.showlist = res.data.data.baoyue
									for (var i = 0; i < this.showlist.length; i++) {
										this.showlist[i].numtitle = 1
										this.showlist[i].bynum = this.showlist[i].standard * this.showlist[i].numtitle
									}
								}
							} else if (res.data.data.addNew == '1') {
								this.currPackage = res.data.data.currPackage
								this.newbaoyue = res.data.data.baoyue
								this.newjiayou = res.data.data.jiayoubao
							}


						} else {
							this.monthshow = false
							this.$toast.fail(res.data.msg)
						}

					})
					.catch(err => {

					})
			},
			onChange(i) {
				this.showlist[i].bynum = this.showlist[i].standard * this.showlist[i].numtitle
				this.$forceUpdate();
			},
			//包月购买：包月购买
			monthlybuy(packageId, numtitle) {

				let _this = this
				var data = {
					packageId: packageId,
					userId: this.id,
					months: numtitle
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				_this.$base.request('recharge/monthly', 'POST', data)
					.then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							_this.$toast.success(res.data.msg)
							_this.show()
							_this.monthly();
						} else {
							_this.$toast.fail(res.data.msg)
						}

					})
					.catch(err => {

					})
			},
			//包月购买：购买加油包
			comebuy(vul) {
				var data = {
					comeId: vul,
					userId: this.id,
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				this.$base.request('recharge/come', 'POST', data)
					.then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							this.show()
							this.$toast.success(res.data.msg)
						} else {
							this.$toast.fail(res.data.msg)
						}

					})
					.catch(err => {

					})
			},
			//包月购买：包月购买
			monthlybuy1(vul) {
				let _this = this
				var data = {
					packageId: vul,
					userId: _this.id,
					months: _this.numtitle
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				_this.$base.request('recharge/monthly', 'POST', data)
					.then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							_this.$toast.success(res.data.msg)
							_this.show()
							_this.monthly();
						} else {
							_this.$toast.fail(res.data.msg)
						}

					})
					.catch(err => {

					})
			},
			//加减月份触发事件
			onChange1(value) {
				this.bynum = this.baoyue.standard * this.numtitle
			},
			//新包月购买
			newbtn(index) {
				let data={
					userId:this.id
				}
				this.$base.request('recharge/parkingPackage', 'GET', data)
				.then(res => {
					if(res.data.code==200){
						let tclist=res.data.data.parkingPackages
						let userPackages=res.data.data.userPackages
						if(tclist.length>0&&userPackages.length==0){
							this.tcshow=true
						}else{
							this.nbylist=this.newbaoyue.steps[index]
							var jg = ''
							if (this.nbylist.maxPower == this.nbylist.minPower) {
								jg = '“功率不限制”'
							} else {
								jg = '功率为“' + this.nbylist.maxPower + '瓦以下”'
							}
							this.nbylist.jg=jg
							this.nbynum=1
							this.nbyshow=true
						}
					}else {
						this.$toast.fail(res.data.msg)
					}
				})
				.catch(err => {
			
				})
				
			},
			tcclose(){
				this.tcshow=false
			},
			tcbtn(){
				this.tcshow=false
				uni.navigateTo({
				       url: '/pages/stopcar_purchase/stopcar_purchase?id='+this.id
				});
			},
			//关闭30天套餐弹窗
			nbyclose(){
				this.nbyshow=false
			},
			//购买30天套餐弹窗
			nbybtn(){
				var endtime = this.list.endTime		
				if (endtime) {
					var chuo = new Date(new Date(endtime).getTime() + (1000 * 60 * 60 * 24 * 30*this.nbynum))
					var now = chuo.getFullYear() + "年" + (chuo.getMonth() + 1) + "月" + chuo.getDate() +
						"日"
					Dialog.confirm({
						title: '提示',
						message: '系统检测您已购买过包月，继续购买包月有效期会自动续延至' + now + '，是否继续？'
					}).then(() => {
						var data = {
							stepId: this.nbylist.stepId,
							months: this.nbynum,
							userId: this.id
						}
						uni.showLoading({
							title: '请稍候',
							mask: true
						})
						this.$base.request('recharge/buy30DayRate', 'POST', data)
							.then(res => {
								uni.hideLoading()
								if (res.data.code == 200) {
									this.show()
									this.monthly()
									this.$toast.success('购买成功')
									this.nbyshow=false
									
								} else {
									this.$toast.fail(res.data.msg)
								}
								
							})
							.catch(err => {
								
							})
					}).catch(() => {
								
					});
				} else {
					var data = {
						stepId: this.nbylist.stepId,
						months: this.nbynum,
						userId: this.id
					}
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request('recharge/buy30DayRate', 'POST', data)
						.then(res => {
							uni.hideLoading()
							if (res.data.code == 200) {
								this.show()
								this.monthly()
								this.$toast.success('购买成功')
								this.nbyshow=false
							} else {
								this.$toast.fail(res.data.msg)
							}
								
						})
						.catch(err => {
								
						})
				}
				
			},
			jybtn(id,standard) {
				Dialog.confirm({
					title: '提示',
					message: '您正在购买包月套餐加油包，共计' + standard + '元，确认购买吗？'
				}).then(() => {
					var data = {
						comeId: id,
						userId: this.id
					}
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request('recharge/buy30DayCome', 'POST', data)
						.then(res => {
							uni.hideLoading()
							if (res.data.code == 200) {
								this.show()
								this.monthly()
							} else {
								this.$toast.fail(res.data.msg)
							}
					
						})
						.catch(err => {
					
						})
				}).catch(() => {
			
				});
				
			},
			//升级新包月套餐
			sjbtn(stepId) {
			
				var data = {
					rateId: stepId,
					userId: this.id
				}
				this.$base.request('recharge/upgrade30DayRate/total', 'GET', data)
					.then(res => {
						if (res.data.code == 200) {
							Dialog.confirm({
								title: '提示',
								message: '您正在升级包月套餐，共计' + res.data.data + '元，确认升级吗？'
							}).then(() => {
								var data = {
									rateId: stepId,
									userId: this.id
								}
								uni.showLoading({
									title: '请稍候',
									mask: true
								})
								this.$base.request('recharge/30DayRate/upgrade', 'POST', data)
									.then(res => {
										uni.hideLoading()
										if (res.data.code == 200) {
											this.show()
											this.monthly()
										} else {
											this.$toast.fail(res.data.msg)
										}
			
									})
									.catch(err => {
			
									})
							}).catch(() => {
			
							});
			
			
						} else {
							this.$toast.fail(res.data.msg)
						}
			
					})
					.catch(err => {
			
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		/deep/.van-overlay{
			z-index: 980!important;
		}
		/deep/.van-popup{
			z-index: 981!important;
		}
		
		.hand {
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;

			image {
				width: 22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}

		.show {
			width: 100%;
			box-sizing: border-box;

			.tapthree {
				margin-top: 16upx;

				.tphand {
					font-size: 32upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
				}

				.tpfoot {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #4b98ed;
					margin-top: 10upx;
				}

				/deep/.van-collapse {
					background-color: #F5F5F5;
				}

				/deep/.van-collapse-item {
					margin-top: 22upx;
				}

				/deep/.van-collapse-item__content {
					padding: 0 30upx;
				}

				/deep/.van-cell {
					align-items: center;
				}

				.showtap {
					width: 100%;
					box-sizing: border-box;

					.stone {
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #666666;
						line-height: 48upx;
						padding-bottom: 38upx;
						border-bottom: 1upx solid #d1d1d1;
					}

					.stwo {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 23upx 0;

						/deep/.van-stepper__input {
							color: #F078CE;
						}

						border-bottom: 1upx solid #d1d1d1;

						.stright {
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							display: flex;
							align-items: center;

							.srtxt {
								margin-right: 28upx;
							}

							.srbtn {
								width: 151upx;
								height: 64upx;
								border-radius: 8upx;
								background-color: #4B98ED;
								text-align: center;
								line-height: 64upx;
								font-size: 28upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #ffffff;
							}
						}
					}
				}

			}

			.newtap {
				width: 100%;
				padding: 10upx 35upx;
				box-sizing: border-box;

				.newone {
					width: 100%;
					box-sizing: border-box;
					border-radius: 16upx;
					box-shadow: 0upx 6upx 8upx 4upx rgba(4, 4, 4, 0.1);
					background-color: #FFFFFF;
					margin: 0 auto;
					margin-top: 20upx;

					.newonetap {
						font-size: 30upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #50a1f3;
						display: flex;
						align-items: center;
						padding: 20upx;
						box-sizing: border-box;

						.newonetapsun {
							font-size: 25upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: red;
							display: flex;
						}
					}

					.newtwotap {
						align-items: center;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						padding: 20upx;
						box-sizing: border-box;
						border-bottom: 1upx solid #e8e8e8;

						.newtwotapsun {
							font-size: 28upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #6c6c6c;
						}

						.newtwotapbtn {
							width: 120upx;
							background-color: #4b98ed;
							color: #FFFFFF;
							border-radius: 10upx;
							text-align: center;
							padding: 10upx 0;
							font-weight: 700;
							font-size: 25upx;
						}
					}

				}
			}
			.tan1 {
				width: 686upx;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 25upx 32upx;
			
				image {
					align-items: center;
					margin: 0 auto;
					width: 630upx;
					height: 700upx;
				}
				.tanhand {
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					color: #333333;
					margin-bottom: 40upx;
					position: relative;
				
					image {
						width: 25upx;
						height: 25upx;
						position: absolute;
						top: 5upx;
						right: 18upx;
					}
				}
				
				.tanone {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					line-height: 45upx;
				
				}
				.stwotap {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					// color: #D0D0D0;
				
					/deep/.van-stepper__input {
						color: #4b98ed;
					}
				}
				.tanonedibu {
					width: 100%;
					display: flex;
					.dbleft {
						width: 40%;
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						padding: 20upx 0;
						color: #666666;
						background-color: #E5E5E5;
						border-radius: 36upx;
						margin: 20upx auto;
					}
					.dbright2 {
						width: 40%;
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						padding: 20upx 0;
						color: #FFFFFF;
						background: #4b98ed;
						border-radius: 36upx;
						margin: 20upx auto;
					}
				}
			
			}

			.sone {
				width: 100%;
				height: 164upx;
				background-color: #4B98ED;
				position: relative;
				margin-bottom: 116upx;

				.sonetap {
					width: 683upx;
					height: 219upx;
					border-radius: 16upx;
					box-shadow: -1upx 5upx 10upx 0upx rgba(22, 22, 22, 0.27);
					position: absolute;
					background-color: #FFFFFF;
					top: 43upx;
					left: 50%;
					margin-left: -341.5upx;

					.stapone {
						width: 100%;
						box-sizing: border-box;
						padding: 26upx 33upx;
						position: relative;

						.staponeleft {
							font-size: 32upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.staponeright {
							width: 101upx;
							height: 50upx;
							border-radius: 25upx 0upx 0upx 25upx;
							text-align: center;
							background-color: #4B98ED;
							position: absolute;
							bottom: 0upx;
							right: 0upx;
							box-sizing: border-box;
							padding-top: 7upx;
							padding-left: 17upx;

							image {
								width: 37upx;
								height: 36upx;
							}
						}
					}
				}

				.staptwo {
					width: 100%;
					box-sizing: border-box;
					padding-left: 27upx;
					padding-bottom: 5upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					display: flex;

					.staptwoleft {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.staptworight {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.sthree {
				margin-top: 160upx;

				.tphand {
					font-size: 32upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
				}

				.tpfoot {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #4b98ed;
					margin-top: 10upx;
				}

				/deep/.van-collapse {
					background-color: #F5F5F5;
				}

				/deep/.van-collapse-item {
					margin-top: 22upx;
				}

				/deep/.van-collapse-item__content {
					padding: 0 30upx;
				}

				/deep/.van-cell {
					align-items: center;
				}

				.showtap {
					width: 100%;
					box-sizing: border-box;

					.stone {
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #666666;
						line-height: 48upx;
						padding-bottom: 38upx;
						border-bottom: 1upx solid #d1d1d1;
					}

					.stwo {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 23upx 0;

						/deep/.van-stepper__input {
							color: #F078CE;
						}

						border-bottom: 1upx solid #d1d1d1;

						.stright {
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							display: flex;
							align-items: center;

							.srtxt {
								margin-right: 28upx;
							}

							.srbtn {
								width: 151upx;
								height: 64upx;
								border-radius: 8upx;
								background-color: #4B98ED;
								text-align: center;
								line-height: 64upx;
								font-size: 28upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #ffffff;
							}
						}
					}
				}
			}

			.sfour {
				width: 686upx;
				height: 88upx;
				border-radius: 8upx;
				background-color: #4B98ED;
				margin: 0 auto;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 88upx;
				margin-top: 176upx;
				color: #ffffff;
			}
		}

	}
</style>
